<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>地震局培训平台</title>
		<link rel="stylesheet" href="style/train2.css" />
	</head>

	<body>
		<div id="show">
			<div class="title3"></div>
			<div class="headbox">
				<div class="head in head1" data-id="1">已完成</div>
				<div class="head head2" data-id="2">未完成</div>
				<div class="head head3" data-id="3">推荐课程</div>
			</div>
			<div class="border"></div>
			<div class="list" id="listData">
				<div class="box">
					<div class="img">
						<div class="border">已完成50%</div>
					</div>
					<div class="list_title">志愿者心理调适与自我保护（一）</div>
					<div class="infobox">
						<div class="read">阅读<span>3.48万/次</span></div>
						<div class="like">❤收藏<span>5646</span></div>
					</div>
				</div>
				
			</div>
			<div class="pagebox">
				<div class="pageborder"></div>
				<div class="numbox">
					<div class="page">1</div>
					<div class="page in">2</div>
					<div class="page">3</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="script/jquery.min.js"></script>
		<script type="text/javascript" src="script/ishoock.tools.js"></script>
		<script type="text/javascript" src="script/common.js"></script>
		<script>
			$(function() {
				$(".img").on("mouseover", function() {
					$(this).in();
				});
				$(".img").on("mouseleave", function() {
					$(".img").removeIn();
				});
				$(".head").on("click",function(){
					$(".head").removeIn();
					$(this).in();
					if($(this).attr("data-id")==2){
						$(".box .img>.border").in();
					}else{
						$(".box .img>.border").removeIn();
					}
				});
				
			    //已完成的课程
				$('.head1').click(function(){
					
						$.ajax({
							type:"get",
							url:host + "user/getListofMyclass?userId=1&type=1",
							async:true,
							dataType:"json",
							success:function(data){
								console.log(data.result)
								$('#listData').empty();
								$.each(data.result,function(index,item){
									
									// 图片地址
									var showimg = '';
									if(item.traningimgUrl != null ){
										var showimg = 'http://101.201.113.151:9000'+item.traningimgUrl.split('ROOT')[1] ;
									}
									$('#listData').append('<div class="box">'+
															'<input type="hidden" value="'+item.traningId+'" class="videoId">'+
															 '<div class="img">'+
															    '<img src="'+showimg+'" />'+ 
																//'<div class="border">已完成'+item.havewatchTime+'</div>'+
															'</div>'+ 
															'<div class="list_title">'+item.traningtite+'</div>'+
															'<div class="infobox">'+
																'<div class="read">阅读<span>'+item.traningReadNum+'万/次</span></div>'+
																'<div class="like">❤收藏<span>'+item.collectionNum+'</span></div>'+
															'</div>'+
														'</div>')
														
							        $('#listData').on('click', '.box', function () {
							        	var videoId = $(this).children('.videoId').val();
							        	window.open("details_train.html" +"?value="+ videoId);
							        })
								})
							},
						})
					})
				
				//未完成的课程
				$('.head2').click(function(){
					
					$.ajax({
						type:"get",
						url:host + "user/getListofMyclass?userId=1&type=0",
						async:true,
						dataType:"json",
						success:function(data){
							console.log(data.result)
							$('#listData').empty();
							$.each(data.result,function(index,item){
								// 图片地址
								var showimg = '';
								if(item.traningimgUrl != null ){
									var showimg = 'http://101.201.113.151:9000'+item.traningimgUrl.split('ROOT')[1] ;
								}
								$('#listData').append('<div class="box">'+
								                        '<input type="hidden" value="'+item.traningId+'" class="videoId">'+
														'<div class="img">'+
														    '<img src="'+showimg+'" />'+ 
															'<div class="border">已完成'+item.havewatchTime+'</div>'+
														'</div>'+
														'<div class="list_title">'+item.traningtite+'</div>'+
														'<div class="infobox">'+
															'<div class="read">阅读<span>'+item.traningReadNum+'万/次</span></div>'+
															'<div class="like">❤收藏<span>'+item.collectionNum+'</span></div>'+
														'</div>'+
													'</div>')
								$('#listData').on('click', '.box', function () {
									var videoId = $(this).children('.videoId').val();
									
									window.open("details_train.html" +"?value="+ videoId);
								})
							})
						},
					})
				})
				
				//推荐课程
				$('.head3').click(function(){
					
					$.ajax({
						type:"get",
						url:host + "/traning/getFavoriteTraning",
						async:true,
						dataType:"json",
						success:function(data){
							console.log(data.result)
							$('#listData').empty();
							$.each(data.result,function(index,item){
								
								// 图片地址
								var showimg = '';
								if(item.imageUrl != null ){
									var showimg = 'http://101.201.113.151:9000'+item.imageUrl.split('ROOT')[1] ;
								}
								$('#listData').append('<div class="box">'+
														'<input type="hidden" value="'+item.id+'" class="videoId">'+
														  '<div class="img">'+
														     '<img src="'+showimg+'" />'+ 
															// '<div class="border">已完成'+item.havewatchTime+'</div>'+
														    '</div>'+ 
														'<div class="list_title">'+item.title+'</div>'+
														'<div class="infobox">'+
															'<div class="read">阅读<span>'+item.readNum+'万/次</span></div>'+
															'<div class="like">❤收藏<span>'+item.collectionNum+'</span></div>'+
														'</div>'+
													'</div>')
								$('#listData').on('click', '.box', function () {
									var videoId = $(this).children('.videoId').val();
									
									window.open("details_train.html" +"?value="+ videoId);
								})
							})
						},
					})
				})
				
				
				
				
				
				
				
				
				
			})
			
		</script>
	</body>

</html>